import React, { useState,useRef, useEffect } from 'react';
import { Button, Modal, Input } from 'antd';
function MyModel() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const inputRef = useRef(null);
  const showModal = () => {
    setIsModalOpen(true);
    inputRef.current && inputRef.current.focus()
  };

  useEffect(() => {
    console.log(isModalOpen)
    if(isModalOpen){
      // console.log(1)
      // inputRef.current && inputRef.current.focus()
    //   setTimeout(() => {
    //   inputRef.current && inputRef.current.focus()
    // }, 0);

    }
  }, [isModalOpen])

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="测试model里面的input获取焦点" visible={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Input ref={inputRef} autoFocus/>
        <Button onClick={()=>{
          inputRef.current.focus()
        }}>点击</Button>
      </Modal>
    </>
  );
}

export default MyModel